<template>
  <div class="content">
    <div class="banner">
      <img :src="datas.imgUrl" />
      <div class="bn-text">
        <h3>{{ datas.title }}</h3>
        <p>{{ datas.detailText }}</p>
      </div>
    </div>
    <div class="priceInformation">
      <div class="price">
        <p>
          <span>{{ datas.discountPrice }}</span
          >元
        </p>
        <span>门市价:{{ datas.price }}元</span>
      </div>
      <button>立即抢购</button>
    </div>
    <div class="serve">
      <p><van-icon name="gold-coin-o" />支持随时退款</p>
      <p><van-icon name="passed" />支持过期自动退款</p>
    </div>
    <div class="appraise">
      <p><van-rate v-model="value" readonly allow-half />3.6</p>
      <span>{{ datas.comment }}人评价<van-icon name="arrow" /></span>
    </div>
    <p class="text">商家信息</p>
    <div class="site">
      <div class="siteMsg">
        <h3>{{ datas.title }}</h3>
        <p>{{ datas.location }}</p>
        <span><van-icon name="location-o" />离我最近</span>
      </div>
      <div class="phone"><van-icon name="phone-o" /></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
let datas = ref('')
let value = ref(3.8)
let store = useStore()
onMounted(() => {
  datas.value = store.state.homeData.detailData
})
</script>

<style lang="scss" scoped>
#app {
  height: 100%;
}
.content {
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  height: 100%;
}
.banner {
  position: relative;
  .bn-text {
    position: absolute;
    bottom: 0.15rem;
    left: 0;
    color: #fff;
    padding: 0 0.15rem;
    h3 {
      font-size: 0.18rem;
      line-height: 0.18rem;
      margin-bottom: 0.1rem;
    }
  }
  img {
    width: 100%;
    height: 2.8rem;
    vertical-align: middle;
  }
}
.priceInformation {
  height: 0.6rem;
  padding: 0 0.1rem;
  display: flex;
  line-height: 0.6rem;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
  .price {
    font-size: 0.12rem;
    display: flex;
    align-items: flex-end;
    p {
      color: red;
      margin-right: 0.05rem;
      span {
        font-size: 0.22rem;
      }
    }
  }
  button {
    height: 0.4rem;
    width: 1.3rem;
    line-height: 0.4rem;
    border: none;
    background: #ff7922;
    border-radius: 0.03rem;
    color: #fff;
    font-size: 0.2rem;
  }
}
.serve {
  display: flex;
  padding: 0 0.1rem;
  font-size: 0.14rem;
  color: #6bbd00;
  height: 0.6rem;
  line-height: 0.6rem;
  background: #fff;
  p {
    margin-right: 0.5rem;
    .van-icon {
      font-size: 0.24rem;
      margin-right: 0.05rem;
    }
  }
}
.appraise {
  height: 0.4rem;
  margin: 0.1rem 0;
  padding: 0 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  font-size: 0.14rem;
  p {
    color: red;
    .van-rate {
      margin-right: 0.05rem;
    }
  }
}
.text {
  height: 0.4rem;
  padding: 0 0.1rem;
  border-bottom: 1px solid #ccc;
  line-height: 0.4rem;
  font-size: 0.18rem;
  background: #fff;
}
.site {
  height: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.1rem;
  margin-bottom: 0.15rem;
  .siteMsg {
    h3 {
      margin-bottom: 0.05rem;
    }
    p {
      margin-bottom: 0.05rem;
    }
    span {
      color: red;
      .van-icon {
        font-size: 0.14rem;
        color: #000;
        margin-right: 0.2rem;
      }
    }
  }
  .phone {
    width: 0.6rem;
    height: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ccc;
    .van-icon {
      font-size: 0.28rem;
    }
  }
}
</style>
